<template>
  <tiny-dialog-box v-model:visible="show" width="1200px" height="650px" title="解析文本" top="1vh">
    <div class="flex">
      <div class="tl pr10" style="width: 200px">
        <div class="mb10" style="text-align: left">示例文本：</div>
        <div>雪花纯生330纸12 &nbsp;5件 &nbsp;33</div>
        <div>二锅头小瓶装 &nbsp;6件 &nbsp;44.5</div>
        <div>怡宝500ml纸箱 &nbsp;10件 &nbsp;22.5</div>
        <div class="mt10 tl">说明：</div>
        <div class="mt10">文本 = 名称 空格 数量 空格 单价 组成一行</div>
        <div>多个商品回车换行。</div>
        <div class="mt10 tl">数量 = 数字加单位组成，中间不能有空格。</div>
        <div class="mt10 tl">单价：如没有单价,取以往单价。</div>
        <div class="mt10 tl">必填：名称 和 数量。</div>
        <div class="mt10 tl" style="color: #1e9fff">注意：名称中间不能有空格。商品名字相似度越高解析越准确。</div>
        <div class="mt10 tl" style="color: red;">商品名称根据相似度最高匹配原则(最多容错5个字符)，请注意核对，比如规格。</div>
        <div style="margin-top: 50px">
          <JButton size="large" @click="doSearch">开始解析</JButton>
        </div>
        <div style="margin-top: 20px">
          <JButton size="large" type="info" @click="confirm">确定并返回</JButton>
        </div>
      </div>
      <div>
        <JInput size="large" v-model="model" placeholder="复制文本到此处" type="textarea" :rows="25" style="width: 350px" />
      </div>
      <div class="ml10" style="width:100%;">
        <j-grid ref="listRef" :columns="state.columns" :height="620" :width="600" all-fields />
      </div>
    </div>
  </tiny-dialog-box>
</template>
<script setup>
import tool from "@/utils/tool";
import {TinyDialogBox, } from '@opentiny/vue'
import JGrid from "@/lui/JGrid.vue";
import JInput from "@/lui/JInput.vue";
import JButton from "@/lui/JButton.vue";
import {ref} from "vue";
const props = defineProps({
  inject: {type: Boolean, default: false},
  show: {type: Boolean, default: false},
  close: {type: Function, default: () => {}},
  fApi: {type: Object, default: () => {return {}}},

})
const show = ref(props.show)
const emit = defineEmits(['changeVal'])
const model = ref()
const listRef = ref()
let buId = ''
let transType=''
const state = ref({
  str: '',
  columns: [
    {type: 'index', width: 40},
    {field: 'invName', title: '商品', width: 200,align: 'left'},
    {field: 'unit', title: '单位', width: 60,align: 'center'},
    {field: 'spec', title: '规格', width: 60,align: 'center'},
    {field: 'qty', title: '数量', width: 80,align: 'right'},
    {field: 'price', title: '单价', width: 70,align: 'right'},
    {field: 'amount', title: '金额', width: 80,align: 'right'},
  ],
  list: []
})
const getList = () => {
  if(!props.fApi) return
  buId = props.fApi.getValue('buId')
  transType = props.fApi.getValue('transType')
  if(!buId) return tool.err('请选择客户')
  model.value = ''
  state.value.list = []
}
const doSearch = () => {
  let str = tool.xe.trim(model.value)
  if(!str) return tool.err('请输入文本1')
  tool.post('bill/strToList', {str, buId: buId}).then(ret => {
    state.value.list = ret.data
    if(ret.data && ret.data.length > 0)
      listRef.value.setData(ret.data.length, ret.data)
  })
}
const confirm = () => {
  if(state.value.list.length === 0) return tool.err('没有解析到的列表')
  let arr = model.value.split('\n')
  let data = []
  arr.map(row => {
    if(tool.xe.trim(row))
      data.push(tool.xe.trim(row))
  })
  if(data.length !== state.value.list.length) {
    return tool.err('还有 ' + (data.length - state.value.list.length) + '条数据没解析成功，请检测商品名称')
  }
  state.value.list.map(row => {
    delete row._X_ROW_KEY
  })
  if(state.value.list.length > 0) {
    props.fApi.setValue('infos', state.value.list)
  }
  props.close()
}

</script>